<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" v-dialogDrag>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">
        <el-row :gutter="16" justify="start">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="消缺任务名称:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入消缺任务名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="单位:" prop="xsmc">
              <el-select v-model="ruleForm.xsmc" placeholder="请选择单位" clearable style="width: 100%">
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="任务状态:" prop="xsmc">
              <el-select v-model="ruleForm.xsmc" placeholder="请选择任务状态" clearable style="width: 100%" disabled>
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="消缺班组:" prop="xsmc">
              <el-select v-model="ruleForm.xsmc" placeholder="请选择消缺班组" clearable style="width: 100%" filterable>
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="派单人电话:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入派单人电话" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="计划开始时间:" prop="jhkssj">
              <el-date-picker v-model="ruleForm.jhkssj" type="datetime" style="width:100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="计划结束时间:" prop="jhjssj">
              <el-date-picker v-model="ruleForm.jhjssj" type="datetime" style="width:100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="消缺主要内容:" prop="xsmc">
              <el-input v-model="ruleForm.xsmc" placeholder="请输入消缺主要内容" clearable type="textarea"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <div>
        <h3 style="color:#009688;">消缺隐患明细</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 5px;"></div>
      <div style="margin-bottom:5px">
        <el-button type="primary" :size="size" icon="fa fa-plus" @click="addTask()"> 新增</el-button>
        <el-button type="primary" :size="size" icon="fa fa-trash-o" @click="deleteTask()"> 删除</el-button>
      </div>
      <vxe-table border stripe ref="selectedEquip" height="300"
                 :data="list.data">
        <vxe-column type="checkbox" width="60" align="center"></vxe-column>
        <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
        <vxe-column field="equipTypeName" title="单位名称" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="缺陷隐患名称" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="任务状态" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="任务名称" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="设备名称" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="详细明细" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="问题分类" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="隐患类型" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="站线名称" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="站线类型" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="发现班组" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="发现人" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="发现日期" align="center" minWidth="120"></vxe-column>
        <vxe-column field="equipTypeName" title="缺陷照片" align="center" minWidth="120"></vxe-column>

      </vxe-table>


      <span slot="footer" class="dialog-footer" v-if="footerVisible">
                <el-button @click="handleCancel()" :size="size" icon="fa fa-minus-square-o">取消</el-button>
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
            </span>
    </el-dialog>
    <taskLibrary ref="taskLibrary"></taskLibrary>
  </div>
</template>
<script>
import {eliminateWorkFrom} from "../model/eliminateWorkFrom";
import taskLibrary from "./taskLibrary";

export default {
  components: {taskLibrary},
  data() {
    return {
      dialogProps: {
        visible: false,
        title: "消缺工单编制",
        width: "70%",
        top: "5px",
      },
      footerVisible: true,
      size: "medium",
      ruleForm: eliminateWorkFrom.FormData,
      rules: eliminateWorkFrom.rules,
      disabledForm: true,
      zxoptions: [],
      xsnrShow: true,
      list: {
        data: []
      },
      row: {}
    };
  },
  methods: {
    showDialog(isEdit, row, isDisabled) {
      console.log(isEdit, row, isDisabled, 1111);
      if (isEdit) {
        this.initData();
      }
      this.ruleForm.jhkssj = moment().add('1', 'days').format('YYYY-MM-DD 8:00:00')
      this.ruleForm.jhjssj = moment().add('1', 'days').format('YYYY-MM-DD 20:00:00')
      this.dialogProps.visible = true;
    },
    //任务库弹窗
    addTask() {
      this.$refs.taskLibrary.showDialog()


    },
    deleteTask() {

    },
    //编辑渲染
    initData() {
    },
    //确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.ruleForm, 111111111111111111)
          this.dialogProps.visible = false;
        } else {
          return false;
        }
      });

    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()
      // for (const k in this.form.data) {
      //   this.form.data[k] = ''
      // }
      this.list = {
        data: [],
      }
      this.row = {}
      this.dialogProps.visible = false;
    },
    //确定关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleCancel()
          this.dialogProps.visible = false;
        })
        .catch((_) => {
        });
    },
  },
};

</script>
<style>
.el-dialog__footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
}
</style>
